<template>
  <div class="ykrx">
    <div class="head">
      <MainSlot>
        <span slot="title">预科入校数据导入</span>
        <button slot="one">导入</button>
        <button slot="two" @click="upload">数据入库</button>
        <button slot="three">退出</button>
        <!-- <button slot="four">退出</button> -->
      </MainSlot>
    </div>

    <input
      type="file"
      ref="upload"
      accept=".xls,.xlsx"
      class="outputlist_upload"
    />

    <el-table :data="tableData" height="720" border style="width: 100%">
      <el-table-column prop="sfdm" label="省份名称" width="80">
      </el-table-column>
      <el-table-column prop="ksh" label="考生号" width="180">
      </el-table-column>
      <el-table-column prop="zkzh" label="准考证号" width="140"> </el-table-column>
      <el-table-column prop="xm" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="xbdm" label="性别代码"> </el-table-column>
      <el-table-column prop="csny" label="出生年月" width="140">
      </el-table-column>
      <el-table-column prop="mzdm" label="名族代码" width="80">
      </el-table-column>
      <el-table-column prop="kslbdm" label="考生类别代码" width="120">
      </el-table-column>
      <el-table-column prop="bylbdm" label="毕业类别代码" width="120">
      </el-table-column>
      <el-table-column prop="zxmc" label="中学名称" width="180">
      </el-table-column>
      <el-table-column prop="sfzh" label="身份证号" width="180">
      </el-table-column>
      <el-table-column prop="jtdz" label="家庭地址" width="240">
      </el-table-column>
      <el-table-column prop="yzbm" label="邮政编码" width="140">
      </el-table-column>
      <el-table-column prop="lxdh" label="联系电话" width="140">
      </el-table-column>
      <el-table-column prop="kslxdm" label="考生类型代码" width="140">
      </el-table-column>
      <el-table-column prop="pcdm" label="批次代码" width="140">
      </el-table-column>
      <el-table-column prop="kldm" label="科类代码" width="140">
      </el-table-column>
      <el-table-column prop="tdcj" label="投档成绩" width="140">
      </el-table-column>
      <el-table-column prop="lqzy" label="录取专业" width="140">
      </el-table-column>
      <el-table-column prop="bz" label="备注" width="140">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import XLSX from "xlsx";
import MainSlot from "../common/MainSlot";
import { request } from "../../network/request"
export default {
  name: "",
  data() {
    return {
      outputs: [],
      tableData: [],
      tableDataCopy: [],
      field: {
        sfdm: '',
        ksh: '',
        zkzh: '',
        kszp: '',
        xm: '',
        xbdm: '',
        csny: '',
        mzdm: '',
        kslbdm: '',
        bylbdm: '',
        zxmc: '',
        sfzh: '',
        jtdz: '',
        yzbm: '',
        lxdh: '',
        kslxdm: '',
        pcdm: '',
        kldm: '',
        tdcj: '',
        lqzy: '',
        bz: '',
      }
    };
  },
  methods: {
    readExcel(e) {
      console.log(e);
      //表格导入
      var that = this;
      const files = e.target.files;
      console.log(files);
      if (files.length <= 0) {
        //如果没有文件名
        return false;
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$Message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }

      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          console.log(ev);
          const data = ev.target.result;
          console.log(data);
          console.log(typeof(data));
          const workbook = XLSX.read(data, {
            type: "binary",
          });
          const wsname = workbook.SheetNames[0]; //取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
          console.log(ws);
          that.tableDataCopy = []
          let length = ws.length
          for(let i=0;i<length;i++) {
            that.tableDataCopy.push(JSON.parse(JSON.stringify(that.field)))
          }
          let i = 0
          for(let item of ws) {  
            for(let key in item) {
              that.tableDataCopy[i][key] = item[key]
            } 
            i++
          }
          console.log(that.tableDataCopy);
          that.tableData = that.tableDataCopy
          console.log(this.$refs.upload.value);
          this.$refs.upload.value = "";
          // that.outputs = []; //清空接收数据
          // //编辑数据
          // for (var i = 0; i < ws.length; i++) {
          //   var sheetData = {
          //     address: ws[i].addr,
          //     value: ws[i].value,
          //   };
          //   that.outputs.push(sheetData);
          // }
          // this.$refs.upload.value = "";
          // console.log(that.outputs);
        } catch (e) {
          return false;
        }
      };
      fileReader.readAsBinaryString(files[0]);
      // fileReader.readAsArrayBuffer(files[0])
    },
    upload() {
      request({
        url: 'http://118.31.51.131:8081/api/zsxt/lqgl/ksxx/ykdr',
        method: 'post',
        data: this.tableData,
        params: {
          token: sessionStorage.getItem('token')
        }
      }).then(value => {
        console.log(value);
        alert('导入成功')
      }).catch(err => {
        console.log(err);
        alert('重复导入')
      })
    }
  },
  beforeCreate() {
    if (sessionStorage.getItem("token") == null) {
      this.$router.push("/login");
    } else {
      let token = sessionStorage.getItem("token");
      let length = sessionStorage.getItem("token").length;
      if (token[length - 4] == "0") {
        this.$router.replace("/login");
      }
    }
  },
  mounted() {
    this.$refs.upload.addEventListener("change", (e) => {
      //绑定监听表格导入事件
      this.readExcel(e);
    });
  },
  components: {
    MainSlot,
  },
};
</script>


<style scoped>
input {
  position: absolute;
  top: 15px;
  left: 1103px;
  width: 100px;
  height: 50px;
  font-size: 0;
  overflow: hidden;
  cursor: pointer;
  /* visibility: hidden; */
  opacity: 0;
}
.ykrx ::v-deep .el-table .cell {
  text-align: center;
}
</style>